<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>权限分配</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/css/public.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="tree" class="layui-tree"></div>
    </div>
</div>
<script src="/static/admin/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['tree'], function () {
        var tree = layui.tree;
        var $ = layui.jquery;

        function getData() {
            var data = []
            $.ajax({
                url: "/api/system/role/permission?role_id=${.role_id}",
                type: "get",
                async: false,
                success: function (res) {
                    if (res.code === 0) {
                        data = res.data
                    } else {
                        layer.msg(res.msg)
                        return false
                    }
                }
            })
            return data
        }

        //权限树
        tree.render({
            elem: '#tree'
            , data: getData()
            , showCheckbox: true  //是否显示复选框
            , accordion: false
            , id: 'demoId'
        });
        $('input[type="checkbox"]').attr("disabled",false);
        $(".layui-tree-txt").removeClass("layui-disabled");
        $(".layui-form-checkbox").removeClass("layui-disabled");
    });
    function getIds() {
        let data =  layui.tree.getChecked('demoId');
        return getCheckData(data)
    }
    //获得选中的节点
    function getCheckData(data) {
        let arr = []
        layui.each(data,function (k,v) {
            arr.push(v.id)
            if (v.children.length >0){
                arr.push.apply(arr,getCheckData(v.children))
            }
        })
        return arr
    }
</script>
</body>
</html>